@include('Admin.public.head')

<body>
@include('Admin.public.menu')
<link rel="stylesheet" href="{{ URL::asset('js/upload/css/uploadImg.css') }}">
<link rel="stylesheet" href="{{ URL::asset('js/admin/layui/css/layui.css') }}">
<link rel="stylesheet" href="{{ URL::asset('css/fonts/font-awesome.min.css') }}">
<style>
    .imgs {
        position: relative;
        width: 150px;
        height: 150px;
    }
    #demo1 {
        width: 100%;
        height: 100%;
        margin: 0 10px 10px 0;
    }
    .closed {
        display: block;
        background: #f5f5f5;
        position: absolute;
        right: -6px;
        top: -6px;
        font-size: 12px;
        padding: 5px;
        border-radius: 50%;
    }
    .closed:hover {
        cursor: pointer;
    }
    #demo3 {
        height: 100%;
        display: flex;
        justify-content: flex-start;
        flex-wrap: wrap;
    }
    #demo3 .del {
        margin: 10px;
    }
    .updsa-imgs {
        width: 100%;
        height: 100%;
    }
    .upImgs {
        position: relative;
        width: 150px;
        height: 150px;
    }
</style>
<div class=" admin-content">
    <div class="daohang">

    </div>
    <div class="admin-biaogelist" id="app">
        <div class="listbiaoti am-cf">
            <ul class="am-icon-flag on"> 添加厂家</ul>
            <dl class="am-icon-home" style="float: right;"> 当前位置： 首页 > <a href="#">厂家列表</a></dl>
        </div>
        <div class="fbneirong">
            <form class="am-form">
                <div class="am-form-group am-cf">
                    <div class="zuo">厂家名称：</div>
                    <div class="you" style="max-width: 300px;">
                        <input type="text" v-model="factory.factory_name" class="am-input-sm" id="doc-ipt-email-1"
                               placeholder="请输入厂家名称">
                    </div>
                </div>
                <div class="am-form-group am-cf">
                    <div class="zuo">联系电话：</div>
                    <div class="you" style="max-width: 300px;">
                        <input type="text" v-model="factory.phone" class="am-input-sm" id="doc-ipt-email-1"
                               placeholder="请输入联系电话">
                    </div>
                </div>
				
				<div class="am-form-group am-cf">
				    <div class="zuo">经营类目：</div>
				    <div class="you" style="max-width: 300px;">
				        <input type="text" v-model="factory.management" class="am-input-sm" id="doc-ipt-email-1"
				               placeholder="请输入经营类目">
				    </div>
				</div>

                <div class="am-form-group am-cf">
                    <div class="zuo">状态：</div>
                    <div class="you" style="margin-top: 3px;">
                        <label class="am-checkbox-inline">
                            <input type="radio" value="1" v-model="factory.status" data-am-ucheck=""
                                   class="am-ucheck-radio">
                            <span class="am-ucheck-icons"><i class="am-icon-unchecked"></i><i
                                        class="am-icon-checked"></i></span>开启
                        </label>
                        <label class="am-checkbox-inline">
                            <input type="radio" value="0" v-model="factory.status" data-am-ucheck=""
                                   class="am-ucheck-radio">
                            <span class="am-ucheck-icons"><i class="am-icon-unchecked"></i><i
                                        class="am-icon-checked"></i></span>关闭
                        </label>
                    </div>
                </div>


                <div class="am-form-group am-cf">
                    <div class="zuo">封面图：</div>
                    <div class="you">
                        <button type="button" class="layui-btn" id="test2">上传图片</button>
                        <div class="layui-upload-list " v-show="photo_old != ''">
                            <div class='del upImgs'>
                                <!-- <img class="layui-upload-img" id="demo1" src="http://qiniu.baoliy168.com/7be48506c0b3b71eb3bfdfaa53faccb5.jpg"> -->
                                <img class="layui-upload-img" id="demo1" :src="factory.pic">
                                <!-- <i class="fa fa-close closed"  v-on:click="del_one(photo_old)"></i> -->
                            </div>
                        </div>
                    </div>
                </div>



                <div id="pickfiles"></div>
                <div class="am-form-group am-cf">
                    <div class="zuo">详情信息</div>
                    <div class="you">
                        <textarea id="editor" v-model="factory.detail"></textarea>
                    </div>
                </div>
                <div class="am-form-group am-cf">
                    <div class="you" style="margin-left: 11%;">
                        <button type="button" class="am-btn am-btn-success am-radius"
                                v-on:click="add()">确定
                        </button>&nbsp;
                        <button type="button" class="am-btn am-btn-secondary am-radius"
                                onclick="javascript:history.back(-1);">返回
                        </button>
                    </div>
                </div>
            </form>
        </div>

        <script src="{{ URL::asset('js/admin/plupload.full.min.js') }}" charset="utf-8"></script>
        <script src="{{ URL::asset('js/admin/qiniu.js') }}" charset="utf-8"></script>


        <script src="{{ URL::asset('js/ueditor/ueditor.config.js') }}"></script>
        <script src="{{ URL::asset('js/ueditor/ueditor.all.min.js') }}"></script>
        <script src="{{ URL::asset('js/admin/amazeui.min.js') }}"></script>
        <script src="{{ URL::asset('js/admin/layui/layui.js') }}"></script>
        <script>
            function getContent() {
                var html = UE.getEditor('editor').getContent();
                return html;
            };
            window.onload = getContent;
        </script>

        <script>

            // console.log('{{csrf_token()}}');

            layui.use('laydate', function () {
                var laydate = layui.laydate;

                //执行一个laydate实例
                laydate.render({
                    elem: '#test1',
                    type: 'datetime',
                    format: 'yyyy/MM/dd HH:mm:ss',
                    show: false,
                    done: function (value, date, endDate) {
                        // console.log(value)
                        app.goods.startTime = value
                    }
                });
            });

            layui.use(['form', 'upload'], function () {
                var form = layui.form,
                    upload = layui.upload;
                // console.log();
                //普通图片上传
                var uploadInst = upload.render({
                    elem: '#test2' //绑定元素
                    ,url: '/upload?_token='+'{{csrf_token()}}'//上传接口
                    ,done: function(res){
                        // console.log(res)
                        if (res.code) {
                            app.del_one(app.photo_old)
                            app.photo_old = res.data;
                            app.getImg(res.data);
                        } else {
                            layer.msg(res.data);
                        }
                    }
                    ,error: function(err){
                        //请求异常回调
                        layer.msg('格式错误');
                    }
                });
                // 商品相册上传
                upload.render({
                    elem: '#uploads'
                    ,url: '/upload?_token='+'{{csrf_token()}}' //上传接口
                    ,multiple: true
                    ,done: function(res){
                        // console.log(res);
                        if (res.code) {
                            // console.log(res.data)
                            app.goodsImgName_old.push( res.data )
                            app.getImgs(res.data);
                        } else {
                            layer.msg(res.data);
                        }
                    }
                    ,error: function(err){
                        //请求异常回调
                        layer.msg('格式错误');
                    }
                });


            });


            {{--function two_tid(e)--}}
            {{--{--}}
                {{--app.goods.two_tid = '';--}}
                {{--$.post("/admin/classify/classify",{ '_token':'{{csrf_token()}}',class:'two_tid',cid:e },function (res) {--}}
                    {{--console.log(res);--}}
                    {{--if(res.code){--}}
                        {{--$("#two_cid_li").show();--}}
                        {{--app.categoryLists = res.data--}}
                    {{--} else {--}}
                        {{--$("#two_cid_li").hide();--}}
                        {{--layer.msg(res.data);--}}
                    {{--}--}}
                {{--});--}}

            {{--}--}}


        </script>
        <script>
            var app = new Vue({
                el: '#app',
                data: {
                    factory: { //添加分类列表
                        pic: '',
						phone:'',
                        factory_name: '', //商品二级分类
                        status: '1',
						detail:'',
                        management: '',
                    },
                    //商品分类
                    categoryList: {},
                    categoryLists: {},
                    //商品图片
                    goodsImgName: [],
                    goodsImgName_old: [],
                    photo_old: '',//旧图片
                },
                methods: {
                    addTimePrice: function () {
                        this.goods.timeprice.push('')
                    },
                    deTimePrice: function () {
                        this.goods.timeprice.splice(this.goods.timeprice.length - 1, 1)
                    },
                    {{--two_tid: function (e) {--}}
                        {{--// console.log(e)--}}
                        {{--app.goods.two_tid = '';--}}
                        {{--$.post("/admin/goods/caseIndex", {--}}
                            {{--'_token': '{{csrf_token()}}',--}}
                            {{--class: 'classify',--}}
                            {{--cid: e--}}
                        {{--}, function (res) {--}}
                            {{--console.log(res);--}}
                            {{--if (res.code) {--}}
                                {{--$("#two_cid_li").show();--}}
                                {{--app.categoryLists = res.data--}}
                            {{--} else {--}}
                                {{--$("#two_cid_li").hide();--}}
                                {{--layer.msg(res.data);--}}
                            {{--}--}}
                        {{--})--}}
                    {{--},--}}
                    obtain: function (val) {
                        var query = window.location.search.substring(1);
                        var vars = query.split("&");
                        for (var i = 0; i < vars.length; i++) {
                            var pair = vars[i].split("=");
                            if (pair[0] == val) {
                                return pair[1];
                            }
                        }
                    },
                    initialize: function () {
                        var id = this.obtain('id');
                        // console.log(id);
                        if (id > 0) {
                            $.post("/admin/goods/factory", {
                                '_token': '{{csrf_token()}}',
                                class: 'find',
                                id: id
                            }, function (res) {

                                if (res.code) {
                                    app.factory = res.data;
                                    app.categoryList = res.data.cids;
                                    app.pic = app.factory.pic;
                                    app.goodsImgName_old = app.goodsImgName.concat();
                                    app.photo_old = app.pic.split('com/')[1];

                                    UE.getEditor('editor').ready(function () {
                                        //this是当前创建的编辑器实例
                                        this.setContent(app.factory.detail);
                                    });

                                } else {
                                    layer.msg(res.data);
                                }
                            });
                        }
                        $.post("/admin/goods/caseIndex", {
                            '_token': '{{csrf_token()}}',
                            class: 'classify'
                        }, function (res) {
                            if (res.code) {
                                app.categoryList = res.data
                            } else {
                                layer.msg(res.data);
                            }
                        });
                    },
                    //编辑
                    edit: function (val) {
                        app.category = val;
                        // console.log(val);
                    },


                    // 获取uptoken(上传凭证)和domain(bucket域名)
                    getTokenMessage: function (uptoken, domain) {
                        var _this = this;
                        $.get("/getToken",function (res) {
                            // console.log(res);
                            _this.initQiniu(res.uptoken,res.domain);
                        });
                    },
                    initQiniu:function (uptoken,domain) {
                        Qiniu.uploader({
                            runtimes: 'html5,flash,html4',      // 上传模式，依次退化(照着官网来就是了)
                            // browse_button: 'pickfiles',         // 上传选择的点选按钮，必需(记得定义id并且保持一致)
                            browse_button: 'pickfiles',
                            // 在初始化时，uptoken，uptoken_url，uptoken_func三个参数中必须有一个被设置
                            // 切如果提供了多个，其优先级为uptoken > uptoken_url > uptoken_func
                            // 其中uptoken是直接提供上传凭证，uptoken_url是提供了获取上传凭证的地址，如果需要定制获取uptoken的过程则可以设置uptoken_func
                            uptoken : uptoken, // uptoken是上传凭证，由其他程序生成
                            // uptoken_url: '/getToken',         // Ajax请求uptoken的Url，强烈建议设置（服务端提供）
                            // uptoken_func: function(){        // 在需要获取uptoken时，该方法会被调用
                            //     // do something(一般是发送手动发送ajax获取到token，如果后端返回格式不跟官方一致又不想该懂源代码可以通过这个方式调整)
                            //     return uptoken;
                            // },
                            get_new_uptoken: false,             // 设置上传文件的时候是否每次都重新获取新的uptoken(没有特殊需求一般为false)
                            domain: domain,     // bucket域名，下载资源时用到，必需(找后端拿)
                            max_file_size: '3000mb',             // 最大文件体积限制(可以调大)
                            flash_swf_url: 'https://cdn.bootcss.com/plupload/2.1.1/Moxie.swf',  //引入flash，相对路径(如果没用到flash上传的话可以不设置,一般支持html5上传的浏览器都不会用到它)
                            max_retries: 3,                     // 上传失败最大重试次数(自动帮你续传分片)
                            chunk_size: '4mb',                  // 分块上传时，每块的体积
                            auto_start: true,
                            filters: {
                                mime_types : [
                                    {title : "Image files", extensions: "jpg,jpeg,gif,png"}
                                ]
                            },
                            unique_names: false ,              //true生成唯一的文件名称
                            save_key: false,               // 选择文件后自动上传，若关闭需要自己绑定事件触发上传
                            init: {
                                FilesAdded: function(up, files) {
                                    // console.log('文件就绪', files);
                                },
                                BeforeUpload: function(up, file) {
                                    // console.log('上传之前', file);
                                },
                                UploadProgress: function(up, file) {
                                    // console.log('上传中 file',file.percent);
                                    // this.progress = file.percent + '%';
                                    // $("#uploadBanner").text('视频已上传：' + file.percent + '%');
                                },
                                FileUploaded: function(up, file, info) {
                                    // console.log('文件上传完毕')
                                    // console.log(info)
                                    var res=JSON.parse(info)
                                    // console.log(file)
                                    // console.log(res.key)
                                    // app.goods.video=domain + res.key
                                    // this.getVideo(res.key)
                                },
                                Error: function(up, err, errTip){
                                    console.log('上传失败', err);
                                },
                                Key: function(up, file) {
                                    //当save_key和unique_names设为false时，该方法将被调用
                                    var key = "";
                                    var ext = Qiniu.getFileExtension(file.name);

                                    // console.log(ext);
                                    var date = new Date();
                                    var year = date.getFullYear();
                                    var month = date.getMonth()+1;
                                    var day = date.getDate();
                                    var hour = date.getHours();
                                    var minute = date.getMinutes();
                                    var second = date.getSeconds();
                                    key += ''+year+month+day+hour+minute+second;
                                    key += '.' + ext;
                                    return key;
                                    // console.log(key);
                                }
                            }
                        });
                    },
                    // 上传图片
                    getImg:function( key ){
                        if(key!=""){
                            $.post("/getFile", {'_token': '{{csrf_token()}}',key: key},function (res) {
                                app.factory.pic = res;
                            });
                        }
                    },
                    getImgs:function( key ){

                        if(key!=""){
                            $.post("/getFile", {'_token': '{{csrf_token()}}',key:key},function (res) {
                                // console.log(res);
                                app.goodsImgName.push( res );
                                // console.log(app.goodsImgName)
                            });
                        }
                    },
                    del_one:function (old) {
                        if(old != ""){
                            $.post("/delete", {'_token': '{{csrf_token()}}',key:old},function (res) {
                                // console.log(res);
                                if(res.code){
                                    // layui.use('layer', function(){
                                    //     var layer = layui.layer;
                                    //     layer.msg(res.data)
                                    // });
                                    // app.photo_old='';

                                } else {
                                    layui.use('layer', function(){
                                        var layer = layui.layer;
                                        layer.msg(res.data)
                                    });
                                }
                            });

                        }
                    },
                    //删除轮播图
                    del:function (index) {
                        var _this=this;
                        var old=app.goodsImgName_old[index];
                        app.goodsImgName.splice(index,1);
                        app.goodsImgName_old.splice(index,1);
                        _this.del_one(old);
                    },
                    //添加
                    save: function () {
                        $.post("/admin/goods/caseIndex", {
                            '_token': '{{csrf_token()}}',
                            class: 'add',
                            category: app.category
                        }, function (res) {
                            if (res.code) {
                                layer.msg(res.data);
                                window.location.href = "/admin/classify/shopClass";
                            } else {
                                layer.msg(res.data);
                            }
                        });
                    },
                    add:function(){
                        app.factory.detail = getContent();

                        // console.log(app.goods);
                        $.post("/admin/goods/factory", {'_token': '{{csrf_token()}}',class: 'add',factory:app.factory},function (res) {
                            // console.log(res);
                            if(res.code == 1){
                                layui.use('layer', function(){
                                    var layer = layui.layer;
                                    layer.msg("设置成功", {icon: 6},function () {
                                        window.location.href = "/admin/goods/factory_index";
                                    });
                                    //                 layer.msg(res.data, {icon: 6},function () {
                                    //                     //关闭当前frame
                                    //                     x_admin_close();

                                    //                     // 可以对父窗口进行刷新
                                    //                     x_admin_father_reload();
                                    //                 });
                                });
                            }else{
                                layer.msg(res.data);
                                // layui.use('layer', function(){
                                //     var layer = layui.layer;
                                //     layer.msg(res.data)
                                // });
                            }
                        });
                    },
                    // empty: function () {
                    //     app.category = {
                    //         id: '',
                    //         pid: '',
                    //         thumb: '',
                    //         image: '',
                    //     };
                    // },
                },
                //自动执行
                mounted: function () {
                    var _this = this;
                    _this.initialize();
                    _this.getTokenMessage();
                    // console.log(app.photo_old)
                },
            })

        </script>
        <script>
            // console.log(app.goods);
        </script>
@include('Admin.public.foot')